<template>
  <div>
    <div class="content">
      <el-dialog
        :model-value="show"
        :title="titleName"
        width="400"
        @close="$emit('hide')"
      >
        <el-form :model="form" width="200px">
          <el-form-item label="原因类型:" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="排序:" :label-width="formLabelWidth">
            <el-input v-model="form.sort" autocomplete="off" />
          </el-form-item>
          <el-form-item label="是否启用" :label-width="formLabelWidth">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="$emit('hide')">取消</el-button>
            <el-button type="primary" @click="enterFn"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch } from "vue";
import {
  editOrderSalesListApi,
  addOrderSalesListApi,
  updateEditOrderSalesListApi,
} from "../api/api";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
const emit = defineEmits(["hide"]);
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
  show: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.id,
  () => {
    if (props.id !== 0) {
      titleName.value = "编辑退货原因";
      editOrderSalesListApi(props.id).then((res) => {
        console.log(res);
        Object.assign(form, res.data);
      });
    } else if (props.id === 0) {
      (form.name = ""), (form.sort = 0), (form.status = 1);
      titleName.value = "添加退货原因";
    }
  }
);
const titleName = ref("添加退货原因");
const formLabelWidth = "140px";
const enterFn = () => {
  if (props.id === 0) {
    addOrderSalesListApi(form).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        emit("hide");
      }
    });
  } else if (props.id !== 0) {
    updateEditOrderSalesListApi(props.id, form).then((res) => {
      if (res.code === 200) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        emit("hide");
      }
    });
  }
};
const form = reactive({
  name: "",
  sort: 0,
  status: 1,
});
</script>

<style scoped lang="less">
.content {
  width: 100px;
}
:deep(.el-form) {
  width: 300px;
}
</style>
